<template>
  <div class="full-page">
    <full-page ref="fullpage" :options="options">
      <!-- Hero Section -->
      <swiper
        :loop="true"
        class="mySwiper h-full">
        <swiper-slide v-for="(item, index) in introduceData" :key="index">
          <div class="relative section py-12 relative banner-box">
            <img
              :src="item.img"
              class="w-full h-full object-cover absolute z-[-1] top-0 left-0" />
            <!-- <div class="absolute inset-0 bg-gradient-to-r"></div> -->
            <div
              class="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
              <div
                class="text-4xl text-white sm:text-5xl lg:text-6xl flex flex-col gap-4">
                <span>
                  {{ item.engName }}
                </span>
                <span class="text-3xl sm:text-5xl lg:text-6xl">
                  {{ item.title }}
                </span>
              </div>
              <p class="mt-6 text-xl text-white max-w-3xl">
                {{ item.desc }}
              </p>
              <div class="mt-10">
                <router-link
                  to="/contact"
                  class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition-colors duration-200">
                  立即咨询
                </router-link>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>

      <!-- 公司简介 -->
      <div class="py-12 bg-white section">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="lg:text-center">
            <h2
              class="text-base text-indigo-600 font-semibold tracking-wide uppercase">
              关于我们
            </h2>
            <p
              class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
              专业的技术服务团队
            </p>
            <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
              我们拥有一支经验丰富的技术团队，专注于为企业提供全方位的数字化解决方案。
            </p>
          </div>
        </div>
      </div>
      <!-- 活动 -->
      <div class="py-12 bg-blue-200 flex flex-col section">
        <div class="mx-auto w-full px-4 sm:px-6 lg:px-40">
          <div class="lg:text-left">
            <h5 class="text-xl sm:text-5xl font-extrabold text-gray-900">
              {{ activitys.engName }}
            </h5>
            <p class="mt-4 max-w-2xl text-base sm:text-4xl text-gray-500">
              {{ activitys.title }}
            </p>
          </div>
          <swiper
            :slides-per-view="2"
            :space-between="10"
            :breakpoints="{
              768: {
                slidesPerView: 3,
                spaceBetween: 50,
              },
            }"
            :scrollbar="{
              draggable: true,
              dragClass: 'custom-draggable-class',
              horizontalClass: 'custom-horizontal-class',
            }"
            :modules="[Scrollbar]"
            class="mySwiper sm:pb-14 pb-[30px] sm:mt-[46px] mt-[24px]">
            <swiper-slide v-for="(item, index) in activitys.list" :key="index">
              <div class="flex flex-col bg-white">
                <div class="active-box">
                  <img
                    :src="item.img"
                    alt=""
                    class="w-full sm:h-[300px] h-[94px] object-fit active-img" />
                </div>
                <div class="sm:px-8 sm:py-7 px-4 py-3 flex flex-col">
                  <span class="sm:text-2xl text-sm text-blue-800 truncate">
                    {{ item.subTitle }}
                  </span>
                  <p
                    class="sm:text-xl text-xs text-stone-500 sm:mt-3 mt-2 text-ellipsis-clamp">
                    {{ item.desc }}
                  </p>
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <!-- 服务预览 -->
      <div class="bg-gray-50 py-12 section">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center">
            <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
              我们的服务
            </h2>
            <p class="mt-4 text-lg text-gray-500">
              为您提供全方位的技术支持和服务
            </p>
          </div>
          <div
            class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
            <div
              v-for="service in services"
              :key="service.title"
              class="bg-white overflow-hidden shadow rounded-lg">
              <div class="p-6">
                <div class="flex items-center">
                  <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
                    <component :is="service.icon" class="h-6 w-6 text-white" />
                  </div>
                  <div class="ml-4">
                    <h3 class="text-lg font-medium text-gray-900">
                      {{ service.title }}
                    </h3>
                  </div>
                </div>
                <p class="mt-4 text-gray-500">{{ service.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </full-page>
  </div>
</template>

<script setup>
import {
  CodeBracketIcon,
  CpuChipIcon,
  CloudIcon,
} from "@heroicons/vue/24/outline";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Scrollbar } from "swiper/modules";
import img1 from "@/assets/1.jpg";
import img2 from "@/assets/2.jpg";
import img3 from "@/assets/3.jpg";

const introduceData = [
  {
    title: "炽焰运动",
    engName: "CHIYAN SPORTS",
    img: img3,
    desc: "炽焰运动是一家专注于为体育赛事提供全方位服务的公司",
  },
  {
    title: "我们的优势",
    engName: "OUR ADVANTAGES",
    img: img3,
    desc: "炽焰运动是一家专注于为体育赛事提供全方位服务的公司",
  },
];
const services = [
  {
    title: "网站开发",
    description: "专业的网站设计与开发服务，打造现代化、响应式的企业网站。",
    icon: CodeBracketIcon,
  },
  {
    title: "系统集成",
    description: "为企业提供系统集成解决方案，实现业务流程的数字化和自动化。",
    icon: CpuChipIcon,
  },
  {
    title: "云服务",
    description: "提供云服务器部署、运维和管理服务，确保系统稳定运行。",
    icon: CloudIcon,
  },
];
const activitys = {
  title: "赛事活动",
  engName: "ACTIVITY",
  list: [
    {
      name: "赛事活动1",
      path: "/activity1",
      img: img1,
      subTitle: "小蓝星幼儿园主题活动",
      desc: " 通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "赛事活动2",
      path: "/activity1",
      img: img1,
      subTitle: "小蓝星幼儿园主题活动",
      desc: " 通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "赛事活动3",
      path: "/activity1",
      img: img2,
      subTitle: "小蓝星幼儿园主题活动",
      desc: " 通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "赛事活动3",
      path: "/activity1",
      img: img2,
      subTitle: "小蓝星幼儿园主题活动",
      desc: " 通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "赛事活动3",
      path: "/activity1",
      img: img2,
      subTitle: "小蓝星幼儿园主题活动",
      desc: " 通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "赛事活动3",
      path: "/activity1",
      img: img2,
      subTitle: "小蓝星幼儿园主题活动",
      desc: " 通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "赛事活动3",
      path: "/activity1",
      img: img2,
      subTitle: "小蓝星幼儿园主题活动",
      desc: " 通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
  ],
};
const options = {
  licenseKey: "Khihiuhoh",
  afterLoad: () => {
    console.log("Emitted 'after load' event.");
  },
};
</script>

<style scoped>
/* 组件样式 */
.banner-box {
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("@/assets/banner-mask.png") no-repeat center center;
    background-size: cover;
    filter: blur(10px);
    z-index: 0;
  }
}
.active-box {
  overflow: hidden;

  & > .active-img:hover {
    transform: scale(1.1);
  }
}
</style>
